<template>
  <div>
     <div class="banner" @click="handleBannerClick">
        <img class="banner-img" :src="bannerImg">
        <div class="banner-info">
            <div class="banner-title">
              {{this.sightName}}
            </div>
            <div class="banner-number">
              {{this.bannerImgs.length}}

            </div>

        </div>


     </div>

    <common-gallary
      :imgs="bannerImgs"
      @close="handleGallaryClose"
      v-show="showGallary"
    ></common-gallary>

  </div>
</template>

<script>
import CommonGallary from 'common/Gallary'
export default {
  name: "Banner",
  props:{
    sightName: String,
    bannerImg: String,
    bannerImgs: Array
  },
  data(){
    return{
      showGallary : false
    }
  },
  methods:{
    handleBannerClick(){
      this.showGallary = true
    },
    handleGallaryClose(){
      this.showGallary = false
    }

  },
  components:{
    CommonGallary
  }

}
</script>

<style lang="stylus" scoped>
 .banner
   position relative
   height 0
   padding-bottom 55%
   overflow hidden
   .banner-img
     width 100%
   .banner-info
     display flex
     position absolute
     left  0
     right 0
     bottom 0
     line-height .6rem
     color white
     background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8))
     .banner-title
       flex 1
       padding-left .2rem
     .banner-number
       height: .32rem
       line-height: .32rem
       margin-top: .14rem
       padding: 0 .4rem
       border-radius: .2rem
       background: rgba(0, 0, 0, .8)
       font-size: .24rem

</style>
